<template>
  <div class="student_package">
    <el-row class="all_main">
      <dragdrop :width="0" :widthLeft="'130px'">
        <template slot="left">
          <div class="all_left">
            <div class="grid-content bg-purple">
              <div class="header_title">
                <span>部门列表</span>
              </div>
              <div class="department_tree">
                <el-tree
                  :data="deptTree"
                  :props="defaultProps"
                  @node-click="handleNodeClick"
                  :expand-on-click-node="false"
                  :highlight-current="true"
                  ref="tree"
                  :indent="2"
                  node-key="pkDepartmentId"
                  :default-expanded-keys="idArr"
                ></el-tree>
              </div>
            </div>
          </div>
        </template>
        <template slot="right">
          <div class="all_right">
            <div class="grid-content bg-purple">
              <div class="dept_details_title">
                <span>学生套餐详细信息</span>
              </div>
              <!-- <div v-show="departmentGuid" style="padding:20px;"> -->
              <el-form :inline="true" :model="elform" class="demo-form-inline" size="mini">
                <!-- <el-form-item label="班级名称:" label-width="80px">
                <el-select v-model="departmentGuid" placeholder="请选择" size="mini" clearable>
                  <el-option
                    v-for="item in departmentoptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                </el-form-item>-->
                <el-form-item label="卡号:" label-width="40px">
                  <el-input v-model="cardNumber" placeholder="卡号" size="mini" clearable></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit" size="mini" icon="el-icon-search">查询</el-button>
                </el-form-item>
              </el-form>
              <el-table
                v-loading="dataListLoading"
                :data="tableinformation"
                style="width:100%"
                border="border"
                :header-cell-style="headFirst"
                highlight-current-row
                :cell-style="(res) => headFirst_col(res, [])"
              >
                <el-table-column prop="userName" label="学生姓名"></el-table-column>
                <el-table-column prop="departmentName" label="班级"  min-width="110px"></el-table-column>
                <el-table-column prop="cardNumber" label="卡号" min-width="110px"></el-table-column>
                <el-table-column prop="subscribeTime" label="开通时间" min-width="144px"></el-table-column>
                <el-table-column prop="availableSeconds" label="剩余时间">
                  <template slot-scope="scope">
                    <div>{{scope.row.availableSeconds | timeconversion}}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="packageState" label="订购状态">
                  <template slot-scope="scope">
                    <div>{{scope.row.packageState | filterpackageState}}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="unsubscribeReason" label="停用原因"></el-table-column>
                <el-table-column prop="expirationTime" label="到期时间" min-width="144px" ></el-table-column>
                <el-table-column prop="packageState" label="操作" v-if="isauth('user_package_edit')">
                  <template slot-scope="scope">
                    <el-button
                      plain
                      title="订购"
                      type="primary"
                      size="mini"
                      @click="orderto(scope.row)"
                      v-if="scope.row.packageState==null||scope.row.packageState==0||scope.row.packageState==2"
                    >订购</el-button>
                    <el-button
                      plain
                      title="取消订购"
                      type="primary"
                      size="mini"
                      @click="cancelorder(scope.row)"
                      v-else
                    >取消订购</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="page">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChangepage"
                  :current-page="currentPage"
                  :page-sizes="[10, 20, 30, 40]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="recordCount"
                ></el-pagination>
              </div>
            </div>
          </div>
        </template>
      </dragdrop>
    </el-row>
    <!-- 订阅弹窗 -->
    <el-dialog
      title="套餐到期时间"
      :visible.sync="subscribe"
      width="500px"
      center
      :close-on-click-modal="false"
      :before-close="closeDialog"
    >
      <el-date-picker
        v-model="value2"
        type="datetime"
        value-format="yyyy-MM-dd HH:mm:ss"
        default-time="yyyy-MM-dd HH:mm:ss"
        placeholder="选择日期时间"
        align="center"
        size="mini"
      ></el-date-picker>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="subscribeAdd()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '一个月',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 30)
              picker.$emit('pick', date)
            }
          },
          {
            text: '三个月',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 90)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一年',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 365)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      // 订阅弹窗
      subscribe: false,
      value2: '',
      // 部门列表
      idArr: [null],
      deptTree: [],
      deptTable: [],
      defaultProps: {
        label: 'departmentName'
      },
      defaultExpandAll: true,
      //
      elform: {},
      departmentoptions: [],
      departmentGuid: '',
      cardNumber: '',
      pageNum: 0,
      pageSize: 20,
      recordCount: 0,
      currentPage: 1,
      searchInfo: {},
      tableinformation: [],
      dataListLoading: false,
      UnitTypeName: ''
    }
  },
  created() {
    this.UnitTypeName = this.getUnitTypeName(this.$store.state.user.unitType)
    this.unitGuid = this.$store.state.user.changeschoolid
    this.userGuid = sessionStorage.getItem('administrator')
  },
  mounted() {
    this.departmentselectlist()
    this.getDeptTree()
  },
  filters: {
    filterpackageState: function(packageState) {
      if (packageState) {
        if (packageState == 0) {
          packageState = '未开通'
        }
        if (packageState == 1) {
          packageState = '已经开通'
        }
        if (packageState == 2) {
          packageState = '未开通'
        }
        return packageState
      }
    }
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid
      }
    }
  },
  methods: {
    // 取消订阅弹窗
    closeDialog() {
      this.value2 = this.getNowTime('yy-mm-dd hh:mm:ss +6yy')
      this.subscribe = false
    },
    // 确定订阅弹窗
    subscribeAdd() {
      let row = this.row
      this.$http({
        url: this.$http.adornUrl('/voip/user/subscribe'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            unitGuid: row.unitGuid,
            userGuid: row.userGuid,
            endData: this.value2
          },
          messageType: this.messageType
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.$message({
            message: '订购成功',
            type: 'success'
          })
          this.studentpackge(1)
          this.subscribe = false
        }
        if (data.messageCode == 500) {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 部门树
    handleNodeClick(data) {
      console.log(this.unitGuid)
      this.departmentGuid = data.departmentGuid
      this.onSubmit()
    },
    //递归添加
    recursiveget(deptTree) {
      for (var i in deptTree) {
        deptTree[i].disabled = true
        if (deptTree[i].children) {
          this.recursiveget(deptTree[i].children)
        }
      }
    },
    //获取递归id
    getId(deptTree) {
      deptTree.forEach(ele => {
        if (ele.flag == true) {
          this.idArr.push(ele.id)
          if (ele.children && ele.children.length > 0) {
            this.getId(ele.children)
          }
        }
      })
    },
    // 获取部门树
    getDeptTree() {
      this.$http({
        url: this.$http.adornUrl('/department/select-department-tree'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: this.unitGuid,
          messageType: 0
        })
      }).then(({ data }) => {
        // console.log(data.messageContent);
        if (data.messageCode == 200) {
          this.deptTree = data.messageContent
          console.log(this.deptTree)
          this.recursiveget(this.deptTree)
          // this.idArr = []
          // this.getId(this.deptTree)
          // console.log(this.deptTree)
        }
      })
    },
    // 查询按钮
    onSubmit() {
      this.pageNum = 1
      this.searchInfo = {}
      this.searchInfo.unitGuid = this.changeschoolid
      if (this.departmentGuid !== null && this.departmentGuid !== '') {
        this.searchInfo.departmentGuid = this.departmentGuid
      }
      if (this.cardNumber !== null && this.cardNumber !== '') {
        this.searchInfo.cardNumber = this.cardNumber
      }
      this.studentpackge()
    },
    //分类页
    handleSizeChange(val) {
      this.pageSize = val
      this.studentpackge(1)
    },
    handleCurrentChangepage(val) {
      this.pageNum = val
      this.studentpackge(1)
    },
    //部门选择
    departmentselectlist() {
      this.departmentoptions = []
      this.$http({
        url: this.$http.adornUrl('/department/query-department-info'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          console.log(data)
          let Arr = data.messageContent
          for (var i = 0; i < Arr.length; i++) {
            let itemobj = {
              value: Arr[i].departmentGuid,
              label: Arr[i].departmentName
            }
            this.departmentoptions.push(itemobj)
          }
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    //套餐查询
    studentpackge(val) {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/voip/package/info-page'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            searchInfo: this.searchInfo
          },
          messageType: this.messageType
        })
      }).then(({ data }) => {
        console.log(data)
        if (data.messageCode == 200) {
          this.tableinformation = data.messageContent.data
          //   if(data.messageContent.data.length>0){
          //      this.packageState=data.messageContent.data[0].packageState
          //   }
          this.recordCount = data.messageContent.recordCount
          this.currentPage = data.messageContent.pageNum
          this.dataListLoading = false
          if (val != 1) {
            this.$message({
              message: '查询成功',
              type: 'success'
            })
          }
        }
        if (data.messageCode == 500) {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 订阅套餐
    orderto(row) {
      this.subscribe = true
      this.row = row
      let date = new Date()
      this.value2 = this.getNowTime('yy-mm-dd hh:mm:ss +6yy')
      console.log(this.value2)
    },
    cancelorder(row) {
      this.$confirm('确定取消订购!', '提示', {
        cancelButtonClass: 'cancelButton',
        confirmButtonClass: 'confirmButton',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/voip/user/unsubscribe'),
          method: 'post',
          data: this.$http.adornData({
            messageContent: {
              unitGuid: row.unitGuid,
              userGuid: row.userGuid
            },
            messageType: this.messageType
          })
        }).then(({ data }) => {
          console.log(data)
          if (data.messageCode == 200) {
            this.$message({
              message: '取消订购成功',
              type: 'success'
            })
            this.studentpackge(1)
          }
          if (data.messageCode == 500) {
            this.$message.error('取消订购失败' + data.errorMessage)
          }
        })
      })
        .catch(() => {})

    }
  }
}
</script>

<style lang="scss" scoped>
.student_package {
  //滚动条的宽度
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  //滚动条的滑块
  ::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 3px;
  }
  /deep/.el-dialog--center .el-dialog__body {
    padding: 20px 0;
    text-align: center;
  }
  // padding: 10px 20px;
  .demo-form-inline,
  .demo-form-inline1 {
 
    /deep/.el-form-item__label {
      padding-right: 5px;
    }
    .el-form-item {
      margin-bottom: 5px;
    }
    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 250px;
    }
  }
  .demo-form-inline1 {
    // border-bottom: 1px solid #e5e9f2;
    .searchmarigin {
      margin-left: 20px;
    }
  }
  .page {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.student_package {
  .all_main {
    .all_left {
      height: 100%;

      .bg-purple {
        height: 100%;
        // overflow-x: scroll;
        // white-space: nowrap;
        .header_title {
          padding: 20px 0;
          font-weight: bolder;
          text-align: center;
          border-bottom: 1px solid #e5e9f2;
          color: #909399;
          overflow: hidden;
        }

        .department_tree {
          // width: 250px;
          height: calc(100vh - 190px);
          overflow-y: auto;

          &::-webkit-scrollbar {
            width: 0;
            height: 0;
            background-color: transparent;
          }

          padding-top: 10px;
          font-weight: bolder;

          .custom-tree-node {
            padding-left: 10px;
            font-size: 15px;

            .colorfont {
              color: DeepSkyBlue;
            }
          }
        }
      }
    }
    .all_right {
      height: calc(100vh - 140px);
      overflow-y: auto;
      &::-webkit-scrollbar {
        width: 0;
        height: 0;
        background-color: transparent;
      }
      // border-top: 2px solid #ccc;
      // border-left: 1px solid #ccc;
      // border-right: 1px solid #ccc;
      // border-bottom: 1px solid #ccc;
      .bg-purple {
        height: 100%;
        .dept_details_title {
          text-indent: 22px;
          height: 47px;
          line-height: 50px;
          border-bottom: 1px solid #e5e9f2;
          color: #909399;
          margin-bottom: 10px;
        }
        .dept_info {
          padding-top: 20px;
        }
        .el-table th {
          display: table-cell !important;
        }
        .page {
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
 
}
</style>